<%@ page language="java" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Cache-Control" content="no-cache, must-revalidate" />
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="expires" content="0" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>图片展示页面</title>
<link rel="stylesheet" href="${ctx}/static/css/style.default.css" type="text/css" />
<script type="text/javascript" src="${ctx}/static/js/plugins/jquery-1.7.min.js"></script>
<script type="text/javascript" src="${ctx}/static/js/plugins/jquery-ui-1.8.16.custom.min.js"></script>
<script type="text/javascript" src="${ctx}/static/js/plugins/jquery.cookie.js"></script>
<script type="text/javascript" src="${ctx}/static/js/custom/general.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
	
	
	///// DROP DOWN BUTTON /////
	jQuery('.dropdown').each(function(){
		var t = jQuery(this);
		t.find('a.dropdown_label').click(function(){
			if(!t.hasClass('open')) {
				var h = t.height();
				t.find('ul').show().css({top: h+2+'px'});	
				t.addClass('open');
			} else {
				t.find('ul').hide();	
				t.removeClass('open');				   
			}
			return false;
		});
		
	});
	
	jQuery(document).click(function(){
		jQuery('.dropdown').removeClass('open').find('ul').hide();
	});
	
});
</script>
<!--[if IE 9]>
    <link rel="stylesheet" media="screen" href="css/style.ie9.css"/>
<![endif]-->
<!--[if IE 8]>
    <link rel="stylesheet" media="screen" href="css/style.ie8.css"/>
<![endif]-->
<!--[if lt IE 9]>
	<script src="js/plugins/css3-mediaqueries.js"></script>
<![endif]-->
</head>

<body class="withvernav">

<div class="bodywrapper">
    <div class="topheader">
        <div class="left">
            <h1 class="logo"><span> 中国煤炭工业协会培训中心</span>&nbsp;&nbsp;培训系统</h1>
            
            <br clear="all" />
            
        </div><!--left-->
        
        <div class="right">
        
            <shiro:guest>
            <div style="float:left;line-height:40px;">
                <span><a href="${ctx}/user/login" style="font-size:14px;color:#999;">登录</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
            </div><!--userinfo-->
            </shiro:guest>
            
            <shiro:user>
            <div class="userinfo">
            	<img src="${ipath}/${user.avatar}" alt="" style="width:23px;height:23px;" />
                <span>${user.acct}</span>
            </div><!--userinfo-->
            
            <div class="userinfodrop">
            	<div class="avatar">
                	<a href=""><img src="${ipath}/${user.avatar}" alt="" style="width:95px;" /></a>
                </div><!--avatar-->
                <div class="userdata">
                	<h4>${user.acct}</h4>
                    <span class="email"></span>
                    <ul>
                    	<li><a href="${ctx}/user/pass">修改密码</a></li>
                    	<li><a href="${ctx}/user/edit">修改个人资料</a></li>
                    	<li><a href="${ctx}/user/upload">上传照片</a></li>
                        <li><a href="${ctx}/user/logout">退出</a></li>
                    </ul>
                </div><!--userdata-->
            </div><!--userinfodrop-->
            </shiro:user>
            
        </div><!--right-->
    </div><!--topheader-->
    
    
    <div class="header">
    	<ul class="headermenu">
        	<li><a href="${ctx}"><span class="icon icon-flatscreen"></span>首页</a></li>
        	<li><a href="${ctx}/proj/"><span class="icon icon-speech"></span>课程</a></li>
        	<li class="current"><a href="${ctx}/study/"><span class="icon icon-chart"></span>学习</a></li>
        	<li><a href="${ctx}/notice/"><span class="icon icon-message"></span>信息</a></li>
        	<li><a href="${ctx}/user/"><span class="icon icon-pencil"></span>个人</a></li>
        </ul>        
    </div><!--header-->
    
    <!--leftmenu-->
    <div class="vernav">
    	<ul>
        	<li class="current"><a href="${ctx}/study/">学习</a></li>
        	<li><a href="${ctx}/exam/">考试</a></li>
         	<li><a href="${ctx}/select/">选课</a></li>
        </ul>
        <a class="togglemenu"></a>
        <br /><br />
    </div><!--leftmenu-->
        
    <div class="centercontent">
    
        <div class="pageheader notab">
            <h1 class="pagetitle">${data.video}</h1>
            <span class="pagedesc">
                <a href="${ctx}/study/course/${aid}/${bid}" class="btn btn_link" style="width:120px;"><span>返回课件列表</span></a>
            </span>
        </div><!--pageheader-->
        
        <div id="contentwrapper" class="contentwrapper nopadding">
            
            <div class="two_third photosharing_wrapper">
            	<div class="photopreview">
                	<div id="a1" style="height:480px;"></div>
                </div>
                <br />
                

                <div class="sharing_commentform">
                </div><!--commentform-->       
                
                         
            </div><!--photosharing_wrapper-->
            
            <div class="one_third last ps_sidebar">
                
				<div class="contenttitle2">
                	<h3>本章所有课程视频</h3>
                </div><!--contenttitle-->
                
                <ul class="morephotolist">
                    <c:forEach items="${array}" var="video">
                	<li style="overflow:hidden;">
                	    <a href="${video.id}"><img src="${tpath}/${video.thumb}" alt="" style="width:100px;height:60px;" /></a>
                	    <div style="width:112px;"><a href="${video.id}" style="color:#319cff">${video.video}</a></div>
                	</li>
                	</c:forEach>	
                </ul><!--morephotolist-->
                
                <br clear="all" />

            </div><!--ps_sidebar-->
            
        </div><!--contentwrapper-->
                
	</div><!-- centercontent -->
    
    
</div><!--bodywrapper-->
<script type="text/javascript" src="${ctx}/static/ckplayer/ckplayer.js"></script>
<script type="text/javascript">
    function loadedHandler() {
        if (CKobject.getObjectById('ckplayer_a1').getType()) {
            addPlayListener();
        }
        else {
            addPlayListener();
        }
    } // 增加监听
    
    function timeHandler(t) {
    	var time = Math.floor(t);
    	var total = ${data.videoLen};
    	var end = total - 10;
     	
        if (time % 60 == 0 && time > ${prog.time}) {
            $.post(
            	'${ctx}/study/time/${prog.id}',
            	{ time : time },
            	function(data){
            	}
            );
        }
      
        if (time == end) {
            $.post(
            	'${ctx}/study/time/${prog.id}',
            	{ time : total },
            	function(data){
            	}
            );
        }
    }
    
    function addPlayListener() {//增加播放监听
        if (CKobject.getObjectById('ckplayer_a1').getType()) {//说明使用html5播放器
            CKobject.getObjectById('ckplayer_a1').addListener('play', playHandler);
        }
        else {
            CKobject.getObjectById('ckplayer_a1').addListener('play', 'playHandler');
        }
    }
    
    function playHandler() {
        //alert('因为注册了监听播放，所以弹出此内容，删除监听将不再弹出');
        removePlayListener();
        
    	if(${prog.time} != ${data.videoLen}){
            CKobject.getObjectById('ckplayer_a1').videoSeek(${prog.time});
    	}
        
        addTimeListener();
    }
    
    function removePlayListener() {//删除播放监听事件
        if (CKobject.getObjectById('ckplayer_a1').getType()) {//说明使用html5播放器
            CKobject.getObjectById('ckplayer_a1').removeListener('play', playHandler);
        }
        else {
            CKobject.getObjectById('ckplayer_a1').removeListener('play', 'playHandler');
        }
    }
    
    function addTimeListener() {//增加时间监听
        if (CKobject.getObjectById('ckplayer_a1').getType()) {//说明使用html5播放器
            CKobject.getObjectById('ckplayer_a1').addListener('time', timeHandler);
        }
        else {
            CKobject.getObjectById('ckplayer_a1').addListener('time', 'timeHandler');
        }
    }
    
    var flashvars={
		f:'${vpath}/${data.url}',
		c:0,
		p:0,
		b:0,
		i:'/static/images/letitgo.jpg',
		loaded: 'loadedHandler',
		my_url:encodeURIComponent(window.location.href)
		};
	var video=['${vpath}/${data.url}->video/mp4'];
	CKobject.embed('${ctx}/static/ckplayer/ckplayer.swf','a1','ckplayer_a1','100%','100%',false,flashvars,video);
</script>

</body>
</html>
